<template>
  <div class="login">
    <!-- 表单 -->
    <div class="login-from">
      <h1>hello</h1>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item  prop="name">
          <el-input
          prefix-icon="el-icon-user-solid"
            v-model="ruleForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item  prop="Pass">
          <el-input
          prefix-icon="el-icon-lock"
            type="password"
            v-model="ruleForm.Pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()"
            >登陆</el-button
          >
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import{login} from "@/network/login"
export default {
  name: "Login",
  data(){
    return{
       ruleForm: {
         Pass: '123456',
          name: 'admin'
        },
        rules: {
         name: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
            { min: 1, max: 12, message: '长度在 1 到 5 个字符', trigger: 'blur' }
          ],
          Pass: [
            { required: true, message: '请输入用户密码', trigger: 'blur' },
            { min: 1, max: 12, message: '长度在 1 到 512个字符', trigger: 'blur' }
          ],
         
        }
    }
  },
  methods:{
    submitForm(){
      //  用户名称  admin   密码：123456
      if(this.ruleForm.Pass=='123456'&&this.ruleForm.name=='admin'){
        // 跳转到内部页面
        //链式编程实现跳转 
        // this.$router.push('/home') //没有参数
        // this.$router.push({path:'/home',query:{id:1}}) // /home?id=1
        this.loginM()
      }else{
        this.$message({
          message: '用户名或密码错误',
          type: 'warning'
        });
      }
    },
    resetForm(){
        this.ruleForm.Pass =''
        this.ruleForm.name=''
    },
    //登陆
    loginM(){
      login('/login',{
        name:this.ruleForm.name,
        Pass:this.ruleForm.Pass
      }).then(res=>{
        //获取token
        // 1把token值放到本地存储
        let token = res.data.token
        let routerList = JSON.stringify(res.data.routlist)
        sessionStorage.setItem('token',token)
        // 保持权限数据，侧边栏导航  vuex
          sessionStorage.setItem('routerList',routerList) //注意：只可以存放字符串类型
        this.$message({
          message: '登陆成功',
          type: 'success'
        });
        this.$router.push('/home')
      })
    }
  }
};
</script>
<style scoped lang="less">
.login {
  height: 100%;
  width: 100%;
  background: url("~@/assets/img/bg.jpg");
  background-size: cover;
  position: relative;
  .login-from{
    height:500px;
    width: 600px;
    position:absolute;
    top:60%;
    right:50px;
    transform: translate(-0%,-50%);
  }
}
</style>
